TreeGrid Gantt Chart Tutorial
13. Zoom
Zooming in chart, zoom levels and smooth zoom
-
The Gantt
Zoom size
is defined by two attribute GanttUnits
and GanttWidth
.
GanttUnits specifies base display units in chart and GanttWidth specifies width of the one GanttUnits in pixels.
Remember, GanttUnits are used only for display, size of unit in data is set by GanttDataUnits and is independent on zoom setting.
-
GanttUnits for dates are:
‘ms’ – milliseconds, ’ms10’ – 10 milliseconds, ’ms100’ – 100 milliseconds,
‘s’ – seconds, ‘s2’ – 2 seconds, ’s5’ – 5 seconds, ’s10’ – 10 seconds, ’s15’ – 15 seconds, ’s30’ – 30 seconds,
‘m’ - minutes, ‘m2’ – 2 minutes, ’m5’ – 5 minutes, ’m10’ – 10 minutes, ’m15’ – quarters of hour, ’m30’ – halves of hour,
’h’ - hours, ’h2’ – 2 hours, ’h3’ – 3 hours, ’h6’ – quarters of day, ’h8’ – thirds of day, ’h12’ – halves of day,
’d’ - days, ’w’ – weeks (starting by Sunday), ’w1’ – weeks (starting by Monday, in Hirji starts by Saturday),
’M’ - months, ’M3’ – quarters of year, ’M6’ – halves of year, ’y’ – years.
-
GanttUnits for numbers are set by any number like '1', '10', '13', '1.3', '0.01' and so on.
-
The Gantt
Data unit size
is defined by GanttDataUnits
and is independent on zoom setting.
The GanttDataUnits specify the unit size for duration of main bar, lag of dependencies or width of Run boxes.
The GanttDataUnits are the same values as GanttUnits listed above.
-
The units can be extended by
GanttDataModifiers
, this attribute defines list of possible suffixes and their multiply values.
For example GanttDataUnits='h' GanttDataModifiers='h:1,d:8,w:40', so GanttDuration for two weeks can be '2w', '10d', '80h' or '80'.
-
Predefined
Zoom levels
are set in root Zoom tag by individual Z tags.
Every Z tag has set its Name attribute and the zoom attributes like GanttUnits to preset them.
When some zoom level is chosen, from Z tag are copied all its attributes (except Name) to the Gantt column.
So the Z tag can contain attributes affecting zoom, but not attributes affecting data or calculations.
Usual attributes that Z tag defines are: GanttUnits, GanttWidth, GanttChartRound, GanttHeader and GanttBackground.
It is possible to define different set of attributes used when set GanttHideExclude='1', by suffix Ex, for example GanttWidth='20' GanttWidthEx='43'.
-
GanttSmoothZoom
='1' permits increasing GanttWidth of the selected zoom level to show exactly the selected range
(by clicking to header date or choosing range in header or by API).
In this case the GanttWidth defines minimal unit width for the zoom level.
If set GanttSmoothZoom='0', the GanttWidth is always preserved, so the zoom works roughly, just chooses the nearest zoom level for selected range.
-
Zoom actions
All the zoom actions can be changed, disabled or attached to different events in Actions tag, by default defined in Defaults.xml.
-
Left click to some header date zooms to the date, to be the one date unit as wide as visible area of the chart.
It is done by action ZoomHeader attached to OnClickGanttHeader event.
-
Selecting date range in header by mouse dragging zooms to selected range, to be the range as wide as visible area of the chart.
It is done by action ZoomGantt attached to OnDragGanttHeader event.
-
Right click to header anywhere undoes last zoom action. Or if there is no previous zoom action, zooms out by one level.
It is done by actions UndoZoom and ZoomOut attached to OnRightClickGanttHeader event.
-
Toolbar buttons ZoomIn and ZoomOut zooms in and out by one zoom level. If there is no more zoom level, do nothing.
It is done by actions ZoomIn and ZoomOut attached to OnClickButtonZoomIn and OnClickButtonZoomOut events.
-
Toolbar button ZoomFit to show the whole chart as wide as possible without showing horizontal scrollbar.
It is done by action ZoomFitAll attached to event OnClickButtonZoomFit.
-
Zoom levels combo to choose the zoom level from list.
It can be added to grid by defining Space cell of Type SelectGanttZoom.
-
Width limitation
for the zoomed charts.
Maximal width of the Gantt column in pixels is set by MaxWidth.
There is also internal limitation for various browsers, the maximal width for IE is 178957 pixels and for Opera even only 23000 pixels.
When the width of the column reaches the limit, it shows only part of the chart. The next hidden parts can be accessed only by zooming out and selecting another part to zoom in.
Cookies
Actual zoom level and unit width is stored in cookies and restored next time. It can be suppressed by GanttLap='1'.
It is possible to save also actual scroll position by setting ScrollLeftLap='0'.
Zoom chosen on start is defined by GanttZoom
attribute, assign here the Name of the Z tag.
To zoom and scroll to some date on start, define GanttZoomDate
attribute, useful especially for high zoom levels, when the whole chart is not visible on start.
-
Zoom API
-
ChangeZoom changes zoom level to given one.
-
ZoomTo zooms to given date range, to show it as wide as possible.
-
ScrollToDate scrolls to given date, even if it is in hidden part of chart due zoom width limitation.